<template>
	<view class="container tc">
		<image class="logo" src="../../static/login/logo.png"></image>
		<text class="title">悟空淘助手</text>
		<text class="tip">淘宝联盟专业订单管理工具</text>
		<view class="btn code" @click="toPath('mess')">验证登录</view>
		<view class="btn user" @click="toPath('password')">账号登录</view>
		<button class="btn wx" type="default" open-type="getUserInfo" @click="wxLogin">微信登录</button>
		<!--弹窗 -->
		<van-dialog class="custom-dialog" use-slot title="尚未绑定微信号" :show="wxShow" :showConfirmButton="false"
		 closeOnClickOverlay @close="wxShow = false">
			<view class="vip-container">
				<view class="vip-tip">{{ errMessage || '您尚未绑定微信号，请使用其他方式登录' }}</view>
				<view class="vip-btn" @click="wxShow = false">我知道了</view>
			</view>
		</van-dialog>
	</view>
</template>

<script>
	import {
		Base64
	} from '../../utils/index.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				wxShow: false,
				errMessage: null
			}
		},
		onLoad() {},
		methods: {
			...mapMutations(['login']),
			toPath(val) {
				uni.navigateTo({
					url: `/pages/common/${val}`
				})
			},
			wxLogin() {
				let data = {};
				let that = this;
				uni.login({
					provider: 'weixin',
					success(res) {
						data.code = res.code;
						const accountInfo = uni.getAccountInfoSync();
						data.appid = accountInfo.miniProgram.appId;

						uni.getUserInfo({
							provider: 'weixin',
							success(res) {
								data.iv = res.iv;
								data.encryptedData = res.encryptedData;
								that.$service.common.checkWx(
									data
								).then(async (res) => {
									that.login(res) // 存token
									that.$store.dispatch('getUserInfo')
									that.$store.dispatch('getUserPerm')
									uni.switchTab({
										url: '/pages/index/index'
									})
								}).catch((err) => {
									that.wxShow = true;
									if (err === '请重新授权') {
										this.errMessage = '授权失败，请尝试重新授权'
									}
								})
							},
							fail: function(err) {}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		widht: 100vw;
		height: 100vh;
		background-color: white;
		padding-top: 212rpx;

		.logo {
			width: 240rpx;
			height: 240rpx;
			display: block;
			margin: 0 auto;
		}

		text {
			display: block;
		}

		.title {
			font-size: 48rpx;
			color: $main-color;
			font-weight: bold;
			// margin-top: 38rpx;
		}

		.tip {
			margin-top: 26rpx;
			font-size: 24rpx;
			color: #999999;
		}

		.btn {
			width: 342rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 42rpx;
			text-align: center;
			font-size: 28rpx;
			color: white;
			background-color: $main-color;
			margin: 0 auto;
			margin-top: 36rpx;
		}

		.code {
			margin-top: 200rpx;
		}

		.wx {
			background-color: white;
			color: $main-color;
			border: 2rpx solid $main-color;
		}

		/deep/ .custom-dialog {
			.van-dialog__header {
				padding-top: 28rpx;
			}

			text-align: center;

			image {
				width: 250rpx;
				height: 250rpx;
			}

			.vip-container {
				padding-bottom: 56rpx;
			}

			.vip-tip {
				color: #666666;
				margin: 20rpx 0;
			}

			.vip-send {
				color: #0C5DFF;
				margin-top: 20rpx;
				margin-bottom: 60rpx;
			}

			.vip-btn {
				width: 342rpx;
				height: 72rpx;
				background-color: #0C5DFF;
				border-radius: 42rpx;
				line-height: 72rpx;
				text-align: center;
				color: white;
				margin: 0 auto;
				margin-top: 86rpx;
			}
		}
	}
</style>
